<template>
  <div class="text-panel">
    <template v-if="!formData.advancedConfig?.delete">
      <el-form v-model="formData" label-position="top">
        <el-form-item label="时间格式">
          <el-select
            v-model="formData.advancedConfig.format"
            class="property-input"
            @change="handleFocus"
          >
            <el-option
              v-for="item in formatList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字号">
          <el-input-number
            v-model="formData.advancedConfig.fontSize"
            class="property-input"
            @focus="handleFocus"
            @change="handleFocus"
            :min="10"
            :max="100"
            :step="2"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-input
            v-model="formData.advancedConfig.color"
            class="property-input"
            @focus="handleFocus"
            type="color"
          >
            <template #append>
              {{ formData.advancedConfig.color }}
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-input
            v-model="formData.advancedConfig.backgroundColor"
            class="property-input"
            @focus="handleFocus"
            type="color"
          >
            <template #append>
              {{ formData.advancedConfig.backgroundColor }}
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="文字水平对齐">
          <el-select
            v-model="formData.advancedConfig.justifyContent"
            class="property-input"
            @change="handleFocus"
          >
            <el-option
              v-for="item in justifyContentList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文字垂直对齐">
          <el-select
            v-model="formData.advancedConfig.alignItems"
            class="property-input"
            @change="handleFocus"
          >
            <el-option
              v-for="item in alignItemsList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template v-else>
      <el-empty description="请选择组件" :image-size="80" />
    </template>
  </div>
</template>
<script setup>
import {
  justifyContentList,
  alignItemsList,
  formatList,
} from '../../config/initData'
let formData = defineModel()
let handleFocus = () => {
  formData.value.active = true
}
</script>
<style scoped lang="scss">
.text-panel {
  .property-input {
    width: 190px;
    margin-top: 6px;
  }
}
.text-list {
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  box-shadow: 0px 1px 5px 0px rgba(0, 21, 41, 0.1);
  padding: 12px;
  box-sizing: border-box;
  border-radius: 6px;
  &-right {
    cursor: pointer;
  }
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &-content {
    display: flex;

    flex-direction: column;
    row-gap: 10px;
    margin-top: 10px;
  }
  &-input {
    width: 120px;
  }
}
.w-140 {
  width: 140px;
}
</style>
